<template>
  <div id="main-container" class="m-auto w-[1050px] bg-gray-200">
    <!-- 第一个推荐区块 -->
    <a-row :gutter="30" id="first-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="main-recommend-col" class="bg-white mr-6">
        <a-typography-title :level="2" id="main-recommend-title" class="!pb-2 !mb-4 !text-lg title_border"> 今日推荐 </a-typography-title>

        <a-list id="main-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list1" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`main-list-item-${item.time}`" class="!py-1">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 第一个分类区块 -->
      <!-- <a-col :span="9" id="main-category-col" class="bg-white">
          <a-typography-title
            :level="2"
            id="main-category-title"
            class="!pb-2 !text-lg title_border1"
          >
            文章分类
          </a-typography-title>
  
          <div id="main-category-container" class="h-[170px] flex flex-col justify-between">
            <a-row 
              v-for="(row, index) in 4" 
              :key="row"
              :id="`main-category-row-${index + 1}`"
              class="!mx-0 border-b border-gray-300 last:border-b-0 py-2"
            >
              <a-col 
                v-for="(col, colIndex) in 2" 
                :key="col"
                :span="12"
                :id="`main-category-item-${index + 1}-${colIndex + 1}`"
              >
                <div class="flex items-center border_3 mb-7">
                  <folder-open-two-tone 
                    id="main-folder-icon"
                    class="mr-2"
                  />
                  <span class="text-base font-semibold text-lg">工作总结</span>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-col> -->
    </a-row>

    <!-- 电子区块 -->
    <a-row :gutter="30" id="electronics-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="electronics-recommend-col" class="bg-white mr-6">
        <a-row id="electronics-header">
          <a-typography-text id="electronics-title" class="!pb-2 !mb-4 !text-lg title_border text-red-500 w-full font-black">
            电子
          </a-typography-text>
          <span id="electronics-more-link" class="absolute right-[12px] top-2 text-gray-300">更多</span>
        </a-row>

        <a-list id="electronics-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list2" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`electronics-list-item-${item.time}`" class="!py-1">
              <div class="items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 电子分类区块 -->
      <!-- <a-col :span="9" id="electronics-hot-col" class="bg-white">
          <a-typography-title
            :level="2"
            id="electronics-hot-title"
            class="!pb-3 !text-lg title_border1"
          >
            热门电子
          </a-typography-title>
  
          <div id="electronics-hot-container" class="h-[170px] flex flex-col justify-between">
            <a-row 
              v-for="n in 10" 
              :id="`electronics-hot-item-${n}`"
              class="mb-4"
              :key="n"
            >
              <a-typography-text 
                :id="`electronics-rank-${n}`"
                :class="['w-4 h-4 leading-4 text-center mr-1', n <= 3 ? 'bg-orange-200 text-white' : 'bg-gray-200']"
              >
                {{ n }}
              </a-typography-text>
              <a-typography-text 
                :id="`electronics-content-${n}`"
                class="text-base font-semibold leading-4"
              >
                工作总结xxxxxxxxxxxxxxxxxxx
              </a-typography-text>
            </a-row>
          </div>
        </a-col> -->
    </a-row>

    <!-- 总结区块 -->
    <a-row :gutter="30" id="summary-row-block" class="m-auto max-w-[1050px] mb-4 pl-5 pt-1">
      <a-col :span="14" id="summary-recommend-col" class="bg-white mr-6">
        <a-row id="summary-header">
          <a-typography-text id="summary-title" class="!pb-2 !mb-4 !text-lg title_border text-red-500 w-full font-black">
            总结
          </a-typography-text>
          <span id="summary-more-link" class="absolute right-[12px] top-2 text-gray-300">更多</span>
        </a-row>

        <a-list id="summary-recommend-list" :grid="{ gutter: 16, column: 2 }" :data-source="list2" class="!text-base">
          <template #renderItem="{ item }">
            <a-list-item :id="`summary-list-item-${item.time}`" class="!py-1">
              <div class="items-center">
                <span class="text-sm text-gray-500 flex-shrink-0">{{ item.time }}</span>
                <a-typography-text class="!text-current hover:text-blue-500 ml-2">
                  {{ item.content }}
                </a-typography-text>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </a-col>

      <!-- 总结分类区块 -->
      <!-- <a-col :span="9" id="summary-hot-col" class="bg-white">
          <a-typography-title
            :level="2"
            id="summary-hot-title"
            class="!pb-3 !text-lg title_border1"
          >
            热门总结
          </a-typography-title>
  
          <div id="summary-hot-container" class="h-[170px] flex flex-col justify-between">
            <a-row 
              v-for="n in 10" 
              :id="`summary-hot-item-${n}`"
              class="mb-4"
              :key="n"
            >
              <a-typography-text 
                :id="`summary-rank-${n}`"
                :class="['w-4 h-4 leading-4 text-center mr-1', n <= 3 ? 'bg-orange-200 text-white' : 'bg-gray-200']"
              >
                {{ n }}
              </a-typography-text>
              <a-typography-text 
                :id="`summary-content-${n}`"
                class="text-base font-semibold leading-4"
              >
                工作总结xxxxxxxxxxxxxxxxxxx
              </a-typography-text>
            </a-row>
          </div>
        </a-col> -->
    </a-row>
  </div>
</template>
  
<script setup lang="jsx">
  import { List, Typography, Row, Col } from 'ant-design-vue';
  import { FolderOpenTwoTone } from '@ant-design/icons-vue';
  
  const { Title: ATypographyTitle, Text: ATypographyText } = Typography;
  const AListItem = List.Item;
  const list1 = ref([
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        }

    ])
    const list2= ref([
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        },
        {
            time:'[12-26]',
            content:'2025年春节七言对联大会'
        }

    ])
</script>
  
<style>
.title_border {
  border-bottom: 2px solid #0081e5;
}
.title_border1 {
  border-bottom: 2px solid green;
}
.border_3 {
  border-bottom: 1px solid #e7e6e6;
}
</style>